<template>
  <el-card>
    <el-form
      :label-position="labelPosition"
      label-width="100px"
      :model="formLabelAlign"
    >
      <div>
        <p>图片</p>
        <el-image
          class="imgBox"
          v-for="index in 10"
          :key="index"
          style="width: 80px; height: 80px"
          :src="imgHeader"
          fit="cover"
        ></el-image>
      </div>
      <div>
        <p>基本信息</p>
        <div class="within">
          <el-form-item label="房源标题">
            <el-input
              :disabled="disabled"
              v-model="formLabelAlign.name"
              placeholder="请输入房源标题"
              class="wiIndex"
            ></el-input>
          </el-form-item>
          <el-form-item label="区域">
            <el-input
              :disabled="disabled"
              v-model="formLabelAlign.name"
              placeholder="请输入区域"
              class="wiIndex"
            ></el-input>
          </el-form-item>
        </div>
        <div class="within">
          <el-form-item label="地铁站">
            <el-input
              :disabled="disabled"
              v-model="formLabelAlign.name"
              placeholder="请输入地铁站"
              class="wiIndex"
            ></el-input>
          </el-form-item>
          <el-form-item label="商铺地址">
            <el-input
              :disabled="disabled"
              v-model="formLabelAlign.name"
              placeholder="请输入商铺地址"
              class="wiIndex"
            ></el-input>
          </el-form-item>
        </div>
        <div class="within">
          <el-form-item label="商铺类型">
            <el-input
              :disabled="disabled"
              v-model="formLabelAlign.name"
              placeholder="请输入商铺类型"
              class="wiIndex"
            ></el-input>
          </el-form-item>
          <el-form-item label="适合业态">
            <el-input
              :disabled="disabled"
              v-model="formLabelAlign.name"
              placeholder="请输入适合业态"
              class="wiIndex"
            ></el-input>
          </el-form-item>
        </div>
        <div class="within">
          <el-form-item label="建筑面积">
            <el-input
              :disabled="disabled"
              v-model="formLabelAlign.name"
              placeholder="请输入建筑面积"
              class="wiIndex"
            ></el-input>
          </el-form-item>
          <el-form-item label="租金">
            <el-input
              :disabled="disabled"
              v-model="formLabelAlign.name"
              placeholder="请输入租金"
              class="wiIndex"
            ></el-input>
          </el-form-item>
        </div>
        <div class="within">
          <el-form-item label="剩余租期">
            <el-input
              :disabled="disabled"
              v-model="formLabelAlign.name"
              placeholder="请输入剩余租期"
              class="wiIndex"
            ></el-input>
          </el-form-item>
          <el-form-item label="转让费">
            <el-input
              :disabled="disabled"
              v-model="formLabelAlign.name"
              placeholder="请输入转让费"
              class="wiIndex"
            ></el-input>
          </el-form-item>
        </div>
        <div class="within">
          <el-form-item label="客流人群">
            <el-input
              :disabled="disabled"
              v-model="formLabelAlign.name"
              placeholder="请输入客流人群"
              class="wiIndex"
            ></el-input>
          </el-form-item>
        </div>
      </div>
      <div>
        <p>配套设施</p>
        <span v-for="index in 10" :key="index">配套设施标签</span>
      </div>
      <div class="houseTag">
        <p>房源标签</p>
        <span v-for="index in 10" :key="index">房源标签</span>
      </div>
      <div class="houseInfo">
        <p>房源信息</p>
        <!-- <div class="within">
          <el-form-item label="房源标题">
            <el-input
              :disabled="disabled"
              v-model="formLabelAlign.name"
              placeholder="请输入房源标题"
              class="wiIndex"
            ></el-input>
          </el-form-item>
        </div>
        <div>
          <el-form-item label="房源介绍">
            <el-input
              type="textarea"
              :rows="2"
              :disabled="disabled"
              v-model="formLabelAlign.name"
              placeholder="请输入房源标题"
              class="wiIndex"
            ></el-input>
          </el-form-item>
        </div> -->
        <div>
          <el-form-item label="房产证">
            <el-image
              style="width: 200px; height: 120px"
              :src="imgHeader"
              fit="cover"
            ></el-image>
          </el-form-item>
        </div>
      </div>

      <div>
        <p>联系人</p>
        <div class="within">
          <el-form-item label="联系人">
            <el-input
              :disabled="disabled"
              v-model="formLabelAlign.name"
              placeholder="请输入联系人"
              class="wiIndex"
            ></el-input>
          </el-form-item>
        </div>
        <div class="within">
          <el-form-item label="手机号">
            <el-input
              :disabled="disabled"
              v-model="formLabelAlign.name"
              placeholder="请输入手机号"
              class="wiIndex"
            ></el-input>
          </el-form-item>
        </div>
        <div class="within">
          <el-form-item label="性别">
            <el-input
              :disabled="disabled"
              v-model="formLabelAlign.name"
              placeholder="请输入性别"
              class="wiIndex"
            ></el-input>
          </el-form-item>
        </div>
      </div>
      <!-- <el-form-item label="账号" class="lang">
        <el-input v-model="formLabelAlign.name" :disabled="disabled"></el-input>
      </el-form-item>
      <el-form-item label="密码" class="lang">
        <el-input
          v-model="formLabelAlign.region"
          :disabled="disabled"
        ></el-input>
      </el-form-item>
      <el-form-item label="商家名称" class="lang">
        <el-input v-model="formLabelAlign.type" :disabled="disabled"></el-input>
      </el-form-item>
      <el-form-item label="商家地址" class="lang">
        <el-input v-model="formLabelAlign.type" :disabled="disabled"></el-input>
      </el-form-item>
      <el-form-item label="营业时间">
        <el-date-picker
          v-model="formLabelAlign.time"
          type="daterange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd HH:mm:ss"
          :default-time="['00:00:00', '23:59:59']"
          @change="timeChange"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="商家图片"> -->
      <!-- <el-image
        style="width: 100px; height: 100px"
        :src="url"
        fit="cover"
      ></el-image>
      <el-image
        style="width: 100px; height: 100px"
        :src="url"
        fit="cover"
      ></el-image>
      <el-upload
        class="avatar-uploader"
        action="https://jsonplaceholder.typicode.com/posts/"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload"
      >
        <img v-if="imageUrl" :src="imageUrl" class="avatar" />
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload> -->
      <!-- <el-upload
          action="https://jsonplaceholder.typicode.com/posts/"
          list-type="picture-card"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="" />
        </el-dialog>
      </el-form-item> -->
      <!-- <el-form-item label="商家详情">
        <textarea
          name=""
          id=""
          cols="60"
          rows="5"
          :disabled="disabled"
          v-model="formLabelAlign.content"
        ></textarea>
      </el-form-item> -->
      <el-form-item class="btnBox">
        <el-button type="danger">拒绝</el-button>
        <el-button type="success">同意</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>
<script>
export default {
  data() {
    return {
      url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      imageUrl: "",
      labelPosition: "right",
      formLabelAlign: {
        name: "张三",
        region: "",
        type: "",
        time: "",
        notice: "",
        content: "hlds",
      },
      imgHeader: this.Global.imgHeader,

      // 用户头像上传
      dialogImageUrl: "",
      dialogVisible: false,
      dialogVisible1: false,
      disabled: true,
      radio: "2",
    };
  },
  methods: {
    // timeChange(e) {
    //   this.time = this.formInline.time;
    //   this.getList();
    // },
    // handleEdit() {
    //   this.dialogVisible1 = true;
    //   this.disabled = false;
    // },
    // handleSure() {
    //   this.dialogVisible1 = false;
    //   this.disabled = true;
    // },
    // 用户头像上传
    // handleAvatarSuccess(res, file) {
    //   this.imageUrl = URL.createObjectURL(file.raw);
    // },
    // beforeAvatarUpload(file) {
    //   const isJPG = file.type === "image/jpeg";
    //   const isLt2M = file.size / 1024 / 1024 < 2;
    //   if (!isJPG) {
    //     this.$message.error("上传头像图片只能是 JPG 格式!");
    //   }
    //   if (!isLt2M) {
    //     this.$message.error("上传头像图片大小不能超过 2MB!");
    //   }
    //   return isJPG && isLt2M;
    // },
    // 照片墙
    // handleRemove(file, fileList) {
    //   console.log(file, fileList);
    // },
    // handlePictureCardPreview(file) {
    //   this.dialogImageUrl = file.url;
    //   this.dialogVisible = true;
    // },
  },
};
</script>
<style scoped>
.lang {
  width: 400px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.dialog-footer {
  width: 100%;
  display: flex;
  justify-content: center;
}
.btnBox {
  display: flex;
  justify-content: center;
}
.within {
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
}

.within .el-form-item {
  width: 45%;
}
.imgBox {
  margin-right: 50px;
  margin-bottom: 10px;
}
span {
  margin-left: 15px;
}
p {
  font-size: 18px;
  margin-bottom: 10px;
}
.houseInfo {
  margin-top: 15px;
}
.houseTag {
  margin-top: 15px;
}
</style>